/**
* @description: 工程列表
* @author: JiWei
* @date:
**/
<template>
  <view class="engineering-main">
    <nav-bar class="header" :background="backgroundColor" back title="工程列表" @goBack="goBack">
      <slot slot="choose_text"><span class="nav-text" @click="addJump">添加</span></slot>
    </nav-bar>
    <view class="enginer-content" v-if="hasLooked">
      <view class="header_tab">
        <van-tabs type="card" v-model="activeName" @change="tabChange">
          <van-tab title="未开工" name="notService">
            <view class="not-service" v-if="taskList.length>0">
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
                    <view class="task-list"  v-for="(item,index) in taskList" :key="index" @click="jump(item,activeName)">
                       <van-swipe-cell>
                         <view class="task-text">
                           <img src="../../../../static/controlImg/swgz.png" alt="">
                           <text>{{item.title}}</text>
                         </view>
                         <template #right>
                           <van-button class="delBtn"  type="danger" @click="handleDel(item,index)" text="取消关注" />
                         </template>
                       </van-swipe-cell>
                    </view>
                </van-list>
              </van-pull-refresh>
            </view>
          </van-tab>
          <van-tab title="已开工" name="inService">
            <view class="not-service" v-if="taskList.length>0">
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
                  <view class="task-list"  v-for="(item,index) in taskList" :key="index" @click="jump(item,activeName)">
                     <van-swipe-cell>
                       <view class="task-text">
                         <img src="../../../../static/controlImg/swgz.png" alt="">
                         <text>{{item.title}}</text>
                       </view>
                       <template #right>
                         <van-button class="delBtn"  type="danger" @click="handleDel(item,index)" text="取消关注" />
                       </template>
                     </van-swipe-cell>
                  </view>
                </van-list>
              </van-pull-refresh>
            </view>
          </van-tab>
          <van-tab title="已完工" name="completed">
            <view class="not-service" v-if="taskList.length>0">
              <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
                  <view class="task-list"  v-for="(item,index) in taskList" :key="index" @click="jump(item,activeName)">
                     <van-swipe-cell>
                       <view class="task-text">
                         <img src="../../../../static/controlImg/swgz.png" alt="">
                         <text>{{item.title}}</text>
                       </view>
                       <template #right>
                         <van-button class="delBtn"  type="danger" @click="handleDel(item,index)" text="取消关注" />
                       </template>
                     </van-swipe-cell>
                  </view>
                </van-list>
              </van-pull-refresh>
            </view>
          </van-tab>
        </van-tabs>
      </view>
    </view>
  </view>
</template>
<script>
import {mapGetters} from 'vuex';
import navBar from "../../../../components/common/nav-bar.vue";
import {Toast} from "vant";
export default {
  name: 'index',
  components: {navBar },
  props: {},
  data() {
    return {
      hasLooked: false,
      backgroundColor:'#417ADC',
      // frequency:'',
      activeName:'notService',
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      taskList:[]
    };
  },
  computed: {
    ...mapGetters(["userData"])
  },
  watch: {},
  async onLoad(options) {
    await this.hasLookedTask();
    this.getLookT();
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/index/index'
      })
    },
    async hasLookedTask() {
      let params = {
        "userId": this.userData.USERID, //用户id
        "page": 1,
        "row": 20
      }
      await this.$apiRequest.gcgkApi.getLook(params).then(res => {
        if(res.code === 0) {
          this.hasLooked = res.data.engs.length > 0;
        } else {
          this.hasLooked = false;
        }
      });
    },
    getLookT() {
      let statusCodeMap = {
        "notService": "1",
        "inService": "2",
        "completed": "3",
      }
      let params = {
        "userId": this.userData.USERID, //用户id
        "statusCode": statusCodeMap[this.activeName], //状态码:1未开工,2已开工,3已完工
        "page": this.page,
        "row": this.limit
      }
      this.$apiRequest.gcgkApi.getLook(params).then(res => {
        if(res.code === 0) {
          this.taskList = res.data.engs.map(item => {
            item.title = item.engName;
            return item;
          })
		  this.total = res.data.total;
          this.isLoading = false;
          this.refreshing = false;
        } else {
          Toast.fail(res.msg);
        }
      })
    },
    tabChange() {
      this.onRefresh();
    },
    addJump() {
      uni.navigateTo({
        url: '/pages/communicationControl/workbench/projectList/newWorks'
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getLookT();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
      } else {
        this.finished = true;
      }
    },
    handleDel(item, index) {
      let params = {
        "userId": this.userData.USERID, //用户id
        "engId": item.objId //工程id
      }
      this.$apiRequest.gcgkApi.setUnLook(params).then(res => {
        if(res.code === 0) {
          Toast.success('取消关注成功');
          this.taskList.splice(index, 1)
        } else {
          Toast.fail("取消关注失败")
        }
      })
    },
    jump(item,activeName) {
      console.log(item,'item')
      console.log(activeName,'activeName')
      let options = {
        type: this.activeName,
        engId: item.objId,
      }
      uni.navigateTo({
        url: `/pages/communicationControl/workbench/projectList/projectDetails?options=${encodeURIComponent(JSON.stringify(options))}&entrytype=gclist`
      })
    }
  }
};
</script>
<style scoped lang="scss">
.engineering-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .nav-text {
    margin-right: px2vh(30);
  }
  .enginer-content {
    width: 100vw;
    height: calc(100vh - #{px2vh(164)});
    background: #F2F6FA;
    overflow: hidden;
    .header_tab {
      height: px2vh(130);
      background: #417ADC;
      .not-service {
        width: calc(100vw - #{px2vw(60)});
        margin-left: px2vw(30);
        height: calc(100vh - #{px2vh(360)});
        margin-top: px2vh(74);
        overflow: auto;
        .task-list {
          height: px2vh(140);
          background: #fff;
          border-radius: px2vw(20);
          margin-bottom: px2vh(30);
          .task-text {
            padding: px2vh(40) px2vw(40);
            font-size: px2vh(42);
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            img {
              width: px2vw(64);
              margin-right: px2vw(20);
              vertical-align: middle;
            }
          }
          .delBtn {
            height: 100%;
            background: #FF4355;
            border-radius: px2vw(0) px2vw(20) px2vw(20) px2vw(0);
          }
        }
      }
    }
    /deep/.van-tabs__nav {
      background-color: rgba(255, 255, 255, 0.4);
    }
    /deep/.van-tabs__nav--card {
      border: px2vw(1) solid rgba(198, 215, 245, 1);
      border-radius: px2vw(20);
    }
   /deep/.van-tab--active {
     font-weight: bold;
     background-color: rgba(255, 255, 255, 0.7);
     color: rgba(65, 122, 220, 1) !important;
    }
    /deep/.van-tab {
      border: none;
      border-radius: px2vw(20);
      color: #fff;
    }
  }
}
</style>
